<template>
  <li>
    <span>{{ item.title }}</span>
    <el-button v-if="btn_1_visibel" type="success" @click="pass(item.id)"
      >通过</el-button
    >
    <el-button v-if="btn_2_visibel" type="danger" @click="noPass(item.id)"
      >不通过</el-button
    >
    <el-button v-if="btn_3_visibel" type="primary" @click="audited(item.id)"
      >审核</el-button
    >
  </li>
</template>

<script>
export default {
  name: "titleItem",
  props: ["item", "auditId"],
  data() {
    return {
      btn_1_visibel: false,
      btn_2_visibel: false,
      btn_3_visibel: true,
    };
  },
  watch: {
    auditId(newValue) {
      if (newValue === this.item.id) {
        this.btn_1_visibel = true;
        this.btn_2_visibel = true;
        this.btn_3_visibel = false;
      } else {
        this.btn_1_visibel = false;
        this.btn_2_visibel = false;
        this.btn_3_visibel = true;
      }
    },
  },
  methods: {
    //   审核按钮绑定事件
    async audited(id) {
      // 按钮组变化
      // 发送文章id
      console.log(id, "审核...");
      //   触发父组件的全局事件并给它一个回调函数用来接收它处理后的状态
      this.$bus.$emit("articleAudit", id);
    },
    // 无论是通过与否，最后都要进行销毁此组件
    // 通过按钮
    pass(id) {
      console.log(id, "文章通过...");
      this.$bus.$emit("articlePass", id);
    },
    // 不通过按钮
    noPass(id) {
      console.log(id, "文章不通过...");
      this.$bus.$emit("articleNoPass", id);
    },
  },
};
</script>


<style scoped>
.el-button {
  margin-left: 10px;
  padding: 7px 7px;
}

li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}

li:hover {
  background-color: #ddd;
}

li:hover button {
  display: block;
}
</style>